<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>表格 Table | FEI-UI-DESIGN</title>
    
    <meta name="generator" content="VitePress v1.0.0-rc.35">
    <link rel="preload stylesheet" href="/fei-ui-design/assets/style.UepqEusw.css" as="style">
    
    <script type="module" src="/fei-ui-design/assets/app.CtN_OfgH.js"></script>
    <link rel="preload" href="/fei-ui-design/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/framework.hV4g2dZ1.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/theme.XkHReBMm.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/components_table.md.ZqShECt8.lean.js">
    <link rel="icon" href="/fei-ui-design/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
    <meta name="author" content="ymf">
    <meta name="google" content="nositelinkssearchbox">
    <meta hid="description" name="description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:title" content="FEI-UI-DESIGN - Framework for Vuejs">
    <meta name="twitter:card" content="summary_large_image">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body><div aria-hidden="true" class="fei-tooltip fei-popper is-dark" style="z-index:2211;display:none;" id="fei-popper-3266" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div aria-hidden="true" class="fei-tooltip fei-popper is-dark" style="z-index:2212;display:none;" id="fei-popper-7369" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div aria-hidden="true" class="fei-tooltip fei-popper is-dark" style="z-index:2213;display:none;" id="fei-popper-8777" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div aria-hidden="true" class="fei-tooltip fei-popper is-dark" style="z-index:2214;display:none;" id="fei-popper-4473" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div aria-hidden="true" class="fei-tooltip fei-popper is-dark" style="z-index:2215;display:none;" id="fei-popper-181" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div aria-hidden="true" class="fei-popover fei-popper is-light" style="width:200px;z-index:2216;display:none;" id="fei-popper-321" role="tooltip"><!--v-if--><!--[--><p><i class="f-iconfont f-icon-question-circle" style="color:var(--fei-color-danger);"></i> 确定切换吗？</p><div style="text-align:right;margin:0;"><button class="fei-button fei-button--mini fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->取消<!--]--></span></button><button class="fei-button fei-button--primary fei-button--mini" type="button"><!----><span class="fei-button__content" style=""><!--[-->确定<!--]--></span></button></div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor-->
    <div id="app"><div id="app" class="theme-container" data-v-818e4420><!----><div class="sidebar-mask" data-v-818e4420></div><main class="page" data-v-818e4420><header class="header-page"><a class="back-link"><i class="bx bx-left-arrow-alt"></i></a><div class="header__content"><div class="flex-header"><h1 id="header-title">表格 Table</h1><ul class="interactive-links"><li title="Package NPM"><a target="_blank" href="https://www.npmjs.com/package/fei-ui-design"><i class="bx bx-package"></i></a></li><li title="View Code Github"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design"><i class="bx bx-code-alt"></i></a></li><li title="Edit Page"><a target="_blank"><i class="bx bx-edit"></i></a></li><li title="Report a Bug"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues/new?title=[表格 Table] - Your Bug Name&amp;body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe 表格 Table should do this%0A%0A**Result**%0AThe 表格 Table does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/exmple-bug/1/"><i class="bx bx-bug"></i></a></li></ul></div></div><svg class="header-effect" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)" fill="#fff"></path></svg></header><aside class="sidebar"><div class="content-sidebar"><ul class="sidebar-sub-headers"><!--[--><!--]--></ul></div></aside><!--[--><!--]--><div class="vp-doc content__default"><div style="position:relative;"><div><h5 id="基础的表格组件-用于显示列表数据" tabindex="-1">基础的表格组件，用于显示列表数据 <a class="header-anchor" href="#基础的表格组件-用于显示列表数据" aria-label="Permalink to &quot;基础的表格组件，用于显示列表数据&quot;">​</a></h5><div class="card"><div class="text"><!--[--><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="8758"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->18<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7188"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->25<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7119"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->30<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6144"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->26<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4349"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->33<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.age }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="斑马纹" tabindex="-1">斑马纹 <a class="header-anchor" href="#斑马纹" aria-label="Permalink to &quot;斑马纹&quot;">​</a></h2><p>通过设置 <code>stripe</code> 来设置斑马纹显示</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default fei-table-stripe"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="8120"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->18<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5678"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->25<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6067"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->30<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="9019"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->26<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4326"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->33<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> stripe</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.age }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="边框" tabindex="-1">边框 <a class="header-anchor" href="#边框" aria-label="Permalink to &quot;边框&quot;">​</a></h2><p>通过设置 <code>border</code> 来设置斑马纹显示</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style=""><div class="fei-table fei-table-default fei-table-border"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="6041"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->18<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="404"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->25<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1793"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->30<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="9069"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->26<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5168"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="fei-tag" style="color:;"><!----><!--[-->33<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.age }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="超出隐藏" tabindex="-1">超出隐藏 <a class="header-anchor" href="#超出隐藏" aria-label="Permalink to &quot;超出隐藏&quot;">​</a></h2><p>可以通过给 <code>columns</code> 设置属性 <code>tooltip</code> 来设置超出隐藏并悬停显示, 如仅有一张表格则可以设置 <code>tooltip</code> 皮肤 <code>tooltip-theme</code> 来开启优化样式 （注意：因表格单元格存在超出隐藏样式所以必须将tooltip标签插入至body元素，会成多余标签，如有多个表格缓存则会插入过多标签造成性能问题，所以是否开启需要根据需求确定）</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="fei-divider fei-divider-horizontal"><span class="fei-divider-inner-text is-left"><!--[-->默认原生title<!--]--></span></div><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style=""><div class="fei-table fei-table-default fei-table-border"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">备注</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="2546"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><span class="fei-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5588"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><span class="fei-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3008"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><span class="fei-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="504"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><span class="fei-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3908"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><span class="fei-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><div class="fei-divider fei-divider-horizontal"><span class="fei-divider-inner-text is-left"><!--[-->开启tooltip<!--]--></span></div><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style=""><div class="fei-table fei-table-default fei-table-border"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">备注</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="1108"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="fei-popper-3266" class="fei-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2104"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="fei-popper-7369" class="fei-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6081"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="fei-popper-8777" class="fei-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7959"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="fei-popper-4473" class="fei-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7971"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="fei-popper-181" class="fei-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> align=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;left&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">默认原生title</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> align=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;left&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">开启tooltip</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> tooltip-theme</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;dark&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="固定表头" tabindex="-1">固定表头 <a class="header-anchor" href="#固定表头" aria-label="Permalink to &quot;固定表头&quot;">​</a></h2><p>height 和 maxHeight 可以设置固定表头</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style="height:200px;"><div class="fei-table fei-table-default fei-table-border fei-table-with-fixed-top"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="7556"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="8960"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5975"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6588"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1940"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> height</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;200&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="固定表头和列" tabindex="-1">固定表头和列 <a class="header-anchor" href="#固定表头和列" aria-label="Permalink to &quot;固定表头和列&quot;">​</a></h2><p>可以同时固定表头和列</p><!--]--></div><div class="example"><div class="center"><!--[--><div style="width:800px;"><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style="height:200px;"><div class="fei-table fei-table-default fei-table-border fei-table-with-fixed-top"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="5864"><!--[--><!--[--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6424"><!--[--><!--[--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4981"><!--[--><!--[--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="906"><!--[--><!--[--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6677"><!--[--><!--[--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell fei-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><div class="fei-table-fixed" style="width:149px;left:1px;"><div class="fei-table-fixed-header"><table cellspacing="0" cellpadding="0" border="0" style="width:149px;left:1px;"><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div class="fei-table-fixed-body" style=""><table cellspacing="0" cellpadding="0" border="0" style="width:149px;left:1px;"><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="5864"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6424"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4981"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="906"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6677"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div></div><div class="fei-table-fixed-right" style="width:100px;right:0px;"><div class="fei-table-fixed-header"><table cellspacing="0" cellpadding="0" border="0" style="width:100px;right:0px;"><colgroup><!--[--><col width="100"><col width="150"><col width="150"><col width="150"><col width="350"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class="fei-table-hidden"><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div class="fei-table-fixed-body" style=""><table cellspacing="0" cellpadding="0" border="0" style="width:100px;right:0px;"><colgroup><!--[--><col width="100"><col width="150"><col width="150"><col width="150"><col width="350"><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="5864"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6424"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4981"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="906"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6677"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-hidden"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div></div><div class="fei-table-fixed-right-header" style="width:0px;height:1px;"></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 800px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> height</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;200&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="流体高度" tabindex="-1">流体高度 <a class="header-anchor" href="#流体高度" aria-label="Permalink to &quot;流体高度&quot;">​</a></h2><!--]--></div><div class="example"><div class="center"><!--[--><div style="padding:2px;"><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style="max-height:200px;"><div class="fei-table fei-table-default fei-table-border"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width="350"><col width="100"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class="fei-table-column-center"><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width="350"><col width="100"><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="8800"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--mini is-plain" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2927"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--mini is-plain" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->增加一条数据<!--]--></span></button></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;padding: 2px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> max-height</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;200&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #ctrl</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;danger&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;mini&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> plain</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;removeRow(index)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">删除</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">br</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;add&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">增加一条数据</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="单选表格" tabindex="-1">单选表格 <a class="header-anchor" href="#单选表格" aria-label="Permalink to &quot;单选表格&quot;">​</a></h2><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="7330"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="9296"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7790"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="925"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6739"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><div><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->清除单选<!--]--></span></button><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->选中第一行<!--]--></span></button></div><br><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="7789"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3158"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3081"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3211"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="684"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->初始化表格2并默认选中第一行<!--]--></span></button></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentRowTable&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      highlight-row</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      @current-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">br</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;clearSelect&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">清除单选</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;clickRow(0)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">选中第一行</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">br</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentRowTable2&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns2&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data2&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      highlight-row</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      @current-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #ctrl</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> text-color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;danger&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;removeRow(index)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">删除</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">br</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;init&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">初始化表格2并默认选中第一行</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="多选表格" tabindex="-1">多选表格 <a class="header-anchor" href="#多选表格" aria-label="Permalink to &quot;多选表格&quot;">​</a></h2><p>通过给 columns 数据设置一项，指定 type: &#39;selection&#39;，即可自动开启多选功能。</p><p>给 data 项设置特殊 key _checked: true 可以默认选中当前项。</p><p>给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。</p><p>@select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。@select-all，点击全选时触发，返回值为 selection，已选项。 @selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="60"><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class="fei-table-column-center"><div class="fei-table-cell fei-table-cell-with-selection"><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="60"><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="7645"><!--[--><!--[--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell fei-table-cell-with-selection"><!----><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="974"><!--[--><!--[--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell fei-table-cell-with-selection"><!----><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2293"><!--[--><!--[--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell fei-table-cell-with-selection"><!----><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1271"><!--[--><!--[--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell fei-table-cell-with-selection"><!----><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3257"><!--[--><!--[--><!--[--><td class="fei-table-column-center"><div class="fei-table-cell fei-table-cell-with-selection"><!----><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->设置全选<!--]--></span></button><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->取消全选<!--]--></span></button><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->获取选中<!--]--></span></button></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;tableRef&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> highlight-row</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">br</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;$refs.tableRef.selectAll(true)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">设置全选</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;$refs.tableRef.selectAll(false)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">取消全选</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;getAllSelected&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">获取选中</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="可展开" tabindex="-1">可展开 <a class="header-anchor" href="#可展开" aria-label="Permalink to &quot;可展开&quot;">​</a></h2><p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: &#39;expand&#39;</code>，即可开启扩展功能。</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="50"><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span></span><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">详细地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="50"><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><!--[--><tr class="fei-table-row"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-with-expand"><!----><!----><!----><!----><div class="fei-table-cell-expand"><i class="f-iconfont f-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="fei-table-row"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-with-expand"><!----><!----><!----><!----><div class="fei-table-cell-expand"><i class="f-iconfont f-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="fei-table-row"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-with-expand"><!----><!----><!----><!----><div class="fei-table-cell-expand"><i class="f-iconfont f-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="fei-table-row"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-with-expand"><!----><!----><!----><!----><div class="fei-table-cell-expand"><i class="f-iconfont f-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="fei-table-row"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell fei-table-cell-with-expand"><!----><!----><!----><!----><div class="fei-table-cell-expand"><i class="f-iconfont f-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="表头分组" tabindex="-1">表头分组 <a class="header-anchor" href="#表头分组" aria-label="Permalink to &quot;表头分组&quot;">​</a></h2><p>columns内容可以设置children来分组渲染表头,合并表头和行列时推荐使用border模式</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style="height:300px;"><div class="fei-table fei-table-default fei-table-border fei-table-with-fixed-top"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th colspan="1" rowspan="2" class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th colspan="3" rowspan="1" class="fei-table-column-center"><div class="fei-table-cell"><!--[--><span class="">基本信息</span><!----><!--]--></div></th><th colspan="2" rowspan="1" class="fei-table-column-center"><div class="fei-table-cell"><!--[--><span class="">学历信息</span><!----><!--]--></div></th><!--]--><!----></tr><tr><!--[--><th colspan="1" rowspan="1" class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="fei-table-cell"><!--[--><span class="">详细地址</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="fei-table-cell"><!--[--><span class="">毕业院校</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="fei-table-cell"><!--[--><span class="">毕业日期</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="927"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京河海大学</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="8571"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京大学</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2830"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海复旦</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3606"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>广东大学</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="495"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京交通学院</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7644"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李晓红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>23</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京交通学院</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6842"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>郭小宁</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>23</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京交通学院</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> height</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;300&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="行列合并" tabindex="-1">行列合并 <a class="header-anchor" href="#行列合并" aria-label="Permalink to &quot;行列合并&quot;">​</a></h2><p>可以设置属性 <code>mergeMethod</code> 制定合并行或者列的算法，方法参数为四个对象 <code>row</code>，<code>column</code>，<code>rowIndex</code>，<code>columnIndex</code>， 该方法返回一个包含两个元素的数组，第一个表示rowspan，第二个为colspan，用于合并单元格 合并表格最好是使用border模式</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide fei-table-wrapper-with-border" style=""><div class="fei-table fei-table-default fei-table-border"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="9902"><!--[--><!--[--><!--[--><td class="" rowspan="2" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7162"><!--[--><!--[--><!--[--><!----><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="9494"><!--[--><!--[--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2611"><!--[--><!--[--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="2"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><!----><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7120"><!--[--><!--[--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> border</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :merge-method</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleSpan&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="排序表格" tabindex="-1">排序表格 <a class="header-anchor" href="#排序表格" aria-label="Permalink to &quot;排序表格&quot;">​</a></h2><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="fei-table-cell-sort">年龄</span><span class="fei-table-sort"><i class="f-iconfont f-icon-caret-up"></i><i class="f-iconfont f-icon-caret-down"></i></span><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="9547"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1973"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5988"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4087"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6574"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="行内编辑" tabindex="-1">行内编辑 <a class="header-anchor" href="#行内编辑" aria-label="Permalink to &quot;行内编辑&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="E:\GitStore\fei-ui-design\docs\components\demo\Table\Edit.vue" relativepath="./demo/Table/Edit.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">爱好</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="4480"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>王小明</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>18</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2631"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>张小刚</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>25</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4648"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>李小红</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>30</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>打豆豆</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="769"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>周小伟</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>26</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="9139"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>张小发</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>33</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>睡觉</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code" v-pre=""><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">  &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-table</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> :</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">columns</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> :</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">data</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> #</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-input</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> ===</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editName</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"text"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        clearable</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      >&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-input</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> #</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-input-number</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> ===</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editAge</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"text"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      >&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-input-number</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> #</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-date-picker</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> ===</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editBirthday</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"date"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        placeholder</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"选择日期"</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      >&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-date-picker</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> #</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-select</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> ===</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editHobby</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> clearable</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">        &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-option</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-for</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">val</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> key</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">) </span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">in</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> hobbyMap</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> :</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">key</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">key</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> :</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">value</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">key</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> :</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">label</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">val</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">          {{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> val</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }}</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">        &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-option</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-select</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> hobbyMap</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">[</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">hobby</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">] </span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">}}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> #</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-input</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> ===</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editAddress</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"text"</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      >&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-input</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> #</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">action</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">div</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> ===</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">        &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"success"</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> plain</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> @</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97">handleSave</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">)</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">保存</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">        &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> @</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> -</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97">1</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">取消</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">div</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">        &#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"small"</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> @</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97">handleEdit</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">)</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">操作</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">      &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">    &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">  &#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">script</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> setup</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> lang</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">"ts"</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">import </span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> reactive</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> from </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">'vue'</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">import </span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">dayjs</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> from </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">'dayjs'</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">const</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> columns</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> [</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> title</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '姓名'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> slot</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> 'name'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> title</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '年龄'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> slot</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> 'age'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> title</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '出生日期'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> slot</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> 'birthday'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> title</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '爱好'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> slot</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> 'hobby'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> title</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '地址'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> slot</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> 'address'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> title</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '操作'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4"> slot</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> 'action'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">]</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">const</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> hobbyMap</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> {</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '吃饭'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '2'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '睡觉'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '3'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '打豆豆'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> }</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">const</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> data</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> ref</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">([</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '王小明'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> 18</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1990-04-22'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '北京市朝阳区芍药居'</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '张小刚'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> 25</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1990-11-11'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '北京市海淀区西二旗'</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '李小红'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> 30</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1985-02-05'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '3'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '上海市浦东新区世纪大道'</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '周小伟'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> 26</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1993-07-11'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '深圳市南山区深南大道'</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  },</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '张小发'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> 33</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '1999-12-12'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '2'</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">    address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> '南京市龙眠大道'</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">const</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> reactive</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">{</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">  editName</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> ''</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">  editAge</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> ''</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">  editBirthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> ''</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">  editHobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> ''</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">  editAddress</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177"> ''</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">  editIndex</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">:</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> -</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97">1</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">}</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">function</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> handleEdit</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">(</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">row</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">,</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">)</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editName</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">name</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editAge</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">age</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editHobby</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">hobby</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editAddress</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">address</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editBirthday</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> new</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> Date</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">row</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">birthday</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">)</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> index</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">}</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">function</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> handleSave</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">(</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">)</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA"> {</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  data</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">value</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">[</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">]</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">name</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editName</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  data</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">value</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">[</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">]</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">age</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editAge</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  data</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">value</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">[</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">]</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">birthday</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97"> dayjs</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editBirthday</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">)</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97">format</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">(</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177">'YYYY-MM-DD'</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">)</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  data</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">value</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">[</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">]</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">hobby</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editHobby</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  data</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">value</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">[</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">index</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4">]</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">address</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic"> obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editAddress</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">  obj</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0">.</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic">editIndex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> =</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0"> -</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97">1</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA">}</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">&#x3C;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8">script</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86">></span></span></code></pre></div></section></div><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">爱好</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="3696"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>王小明</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>18</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1439"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>张小刚</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>25</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1651"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>李小红</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>30</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>打豆豆</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1674"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>周小伟</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>26</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1584"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>张小发</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>33</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>睡觉</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index, row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editName&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        clearable</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.name }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #age</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index, row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input-number</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editAge&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input-number</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.age }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #birthday</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index, row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-date-picker</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editBirthday&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;date&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        placeholder</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;选择日期&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-date-picker</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.birthday }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #hobby</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index, row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-select</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex === index&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editHobby&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> clearable</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-option</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-for</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;(val, key) in hobbyMap&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :key</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;key&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :value</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;key&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :label</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;val&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">          {{ val }}</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-option</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-select</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ hobbyMap[row.hobby] }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #address</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index, row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editAddress&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">{{ row.address }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #action</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ index, row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-if</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex === index&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;success&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> plain</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleSave(index)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">保存</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.editIndex = -1&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">取消</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-else</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleEdit(row, index)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">操作</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="拖拽调整顺序" tabindex="-1">拖拽调整顺序 <a class="header-anchor" href="#拖拽调整顺序" aria-label="Permalink to &quot;拖拽调整顺序&quot;">​</a></h2><p>可以设置draggable开启拖拽排序</p><p>注意，设置拖拽排序后，且鼠标拖拽也覆盖了鼠标选中文字，此时可以额外设置也可以设置handle来指定拖拽某一个元素实现</p><p>如需要更新数据，则需使用v-model:data来更新,或配合@drag-drop函数来处理更新数据都可以</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div><p>默认拖拽</p><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="70"><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">ID</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="70"><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="6080"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3006"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="2926"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>3</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="438"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>4</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3979"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>5</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><p>实际数据：[
  &quot;1-王小明&quot;,
  &quot;2-张小刚&quot;,
  &quot;3-李小红&quot;,
  &quot;4-周小伟&quot;,
  &quot;5-张小发&quot;
]</p></div><div class="fei-divider fei-divider-horizontal"><!----></div><div><p>如需和单选结合使用，推荐使用drag-drop函数来自定义控制，这样可以更好的实现自定义选中效果</p><p>drag-handle</p><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="70"><col width="70"><col width=""><col width=""><col width=""><col width=""><col width="120"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">#</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">ID</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="70"><col width="70"><col width=""><col width=""><col width=""><col width=""><col width="120"><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="1846"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="fei-icon f-iconfont f-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5530"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="fei-icon f-iconfont f-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>2</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="1319"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="fei-icon f-iconfont f-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>3</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3356"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="fei-icon f-iconfont f-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>4</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="9664"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="fei-icon f-iconfont f-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>5</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="fei-button fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="fei-button fei-button--danger fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><p>实际数据：[
  &quot;1-王小明&quot;,
  &quot;2-张小刚&quot;,
  &quot;3-李小红&quot;,
  &quot;4-周小伟&quot;,
  &quot;5-张小发&quot;
]</p><p>选中行：{}</p></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">默认拖拽</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-model:data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data1&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns1&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> draggable</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">实际数据：{{ data1.map(v =&gt; v.id + &#39;-&#39; + v.name) }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">如需和单选结合使用，推荐使用drag-drop函数来自定义控制，这样可以更好的实现自定义选中效果</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">drag-handle</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentRowTable&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns2&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data2&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        draggable</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        drag-handle</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;.drag-handle&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        highlight-row</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @drag-drop</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleDragDrop&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @current-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #handle</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ row }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;drag-handle&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;cursor: grab&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-icon</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;drag&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;20&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">span</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #ctrl</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;{ row, index }&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click.stop</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleEdit(row, index)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">编辑</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> text-color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;danger&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click.stop</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;removeRow(index)&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">删除</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">实际数据：{{ data2.map(v =&gt; v.id + &#39;-&#39; + v.name) }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">选中行：{{ currentRow }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="loading状态" tabindex="-1">loading状态 <a class="header-anchor" href="#loading状态" aria-label="Permalink to &quot;loading状态&quot;">​</a></h2><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="7049"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6455"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="536"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="7207"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="5129"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><!--[--><span tabindex="0" class="fei-switch fei-switch-default" style="" ariadescribedby="fei-popper-321"><input type="hidden" value="false"><span class="fei-switch-inner"><!----><!--[--><!--]--></span><!----></span><!--teleport start--><!--teleport end--><!--]--></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :loading</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;loading&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">br</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-switch</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;loading&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-switch</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="大小状态" tabindex="-1">大小状态 <a class="header-anchor" href="#大小状态" aria-label="Permalink to &quot;大小状态&quot;">​</a></h2><p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整表格尺寸为大或小，默认不填或填写 default 。</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="mb-16"><div class="fei-radio-group fei-radio-group-button" role="radiogroup"><!--[--><label class="fei-radio" role="radio" aria-checked="false" tabindex="-1"><span class="fei-radio__input"><span class="fei-radio__inner"></span><input class="fei-radio__original" value="large" type="radio" aria-hidden="true" name="" tabindex="-1"></span><span class="fei-radio__label"><!--[-->松散<!--]--><!----></span></label><label class="fei-radio is-checked" role="radio" aria-checked="true" tabindex="0"><span class="is-checked fei-radio__input"><span class="fei-radio__inner"></span><input checked class="fei-radio__original" value="default" type="radio" aria-hidden="true" name="" tabindex="-1"></span><span class="fei-radio__label"><!--[-->默认<!--]--><!----></span></label><label class="fei-radio" role="radio" aria-checked="false" tabindex="-1"><span class="fei-radio__input"><span class="fei-radio__inner"></span><input class="fei-radio__original" value="small" type="radio" aria-hidden="true" name="" tabindex="-1"></span><span class="fei-radio__label"><!--[-->紧凑<!--]--><!----></span></label><!--]--></div></div><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><tr class="fei-table-row" row-key="1577"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="10086"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="4175"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="6038"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="fei-table-row" row-key="3853"><!--[--><!--[--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="fei-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;mb-16&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio-group</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;tableSize&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;button&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;large&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">松散</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;default&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">默认</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">紧凑</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-radio-group</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;tableSize&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="无数据" tabindex="-1">无数据 <a class="header-anchor" href="#无数据" aria-label="Permalink to &quot;无数据&quot;">​</a></h2><p>noDataText可以设置无数据状态</p><!--]--></div><div class="example"><div class="center"><!--[--><div class="fei-table-wrapper fei-table-hide" style=""><div class="fei-table fei-table-default"><div class="fei-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="fei-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="fei-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="display:none;" class="fei-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="fei-table-tbody"><!--[--><!--]--></tbody></table></div><div style="" class="fei-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><div class="fei-empty fei-empty-normal"><div class="fei-empty-image"><!--[--><svg class="fei-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="fei-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="fei-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="fei-empty-img-simple-path"></path></g></g></svg><!--]--></div><p class="fei-empty-description"><!--[-->No Data<!--]--></p></div></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :columns</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;columns&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> no-data-text</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;No Data&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-table</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><h2 id="table-props" tabindex="-1">Table props <a class="header-anchor" href="#table-props" aria-label="Permalink to &quot;Table props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>data</td><td>显示的结构化数据，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。</td><td>Array</td><td>—</td><td>[]</td></tr><tr><td>columns</td><td>表格列的配置描述，具体项见后文</td><td>Array</td><td>—</td><td>[]</td></tr><tr><td>stripe</td><td>间隔斑马纹</td><td>Boolean</td><td>false/true</td><td>false</td></tr><tr><td>border</td><td>纵向边框</td><td>Boolean</td><td>false/true</td><td>false</td></tr><tr><td>show-header</td><td>是否显示表头</td><td>Boolean</td><td>false/true</td><td>false</td></tr><tr><td>width</td><td>表格宽度，单位 px</td><td>Number/String</td><td>—</td><td>auto</td></tr><tr><td>height</td><td>表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头</td><td>Number/String</td><td>—</td><td>—</td></tr><tr><td>max-height</td><td>最大表格高度</td><td>Number/String</td><td>—</td><td>—</td></tr><tr><td>loading</td><td>表格加载状态</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>disabled-hover</td><td>禁用悬停高亮</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>highlight-row</td><td>是否支持高亮选中的行，即单选</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>表格尺寸</td><td>string</td><td>large / small</td><td>default</td></tr><tr><td>no-data-text</td><td>空数据内容</td><td>string</td><td>—</td><td>暂无数据</td></tr><tr><td>loading-text</td><td>加载数据文字</td><td>string</td><td>—</td><td>正在加载</td></tr><tr><td>draggable</td><td>开启拖拽调整行顺序，同步元数据需要使用v-model:data使用或需配合 @drag-drop 事件更新data都可以</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>drag-handle</td><td>拖拽的handle图标</td><td>String</td><td>—</td><td>—</td></tr><tr><td>row-key</td><td>是否强制使用内置row-key刷新</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>merge-method</td><td>表格合并行列的方法函数</td><td>Function</td><td>—</td><td>false</td></tr></tbody></table><h2 id="table-events" tabindex="-1">Table events <a class="header-anchor" href="#table-events" aria-label="Permalink to &quot;Table events&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>current-change</td><td>开启 highlight-row 后有效，当表格的当前行发生变化的时候会触</td><td>currentRow, oldCurrentRow,index</td></tr><tr><td>select</td><td>在多选模式下有效，选中某一项时触发</td><td>已选项, 刚选择</td></tr><tr><td>select-cancel</td><td>在多选模式下有效，取消选中某一项时触发</td><td>已选项, 取消选择</td></tr><tr><td>select-all</td><td>全选时触发</td><td>已选项</td></tr><tr><td>select-all-cancel</td><td>取消全选时触发</td><td>已选项</td></tr><tr><td>selection-change</td><td>选中项发生变化时就会触发</td><td>已选项</td></tr><tr><td>sort-change</td><td>排序时有效，当点击排序时触发</td><td>column：当前列数据 key：排序依据的指标 order(值为 asc 或 desc)</td></tr><tr><td>row-click</td><td>单击某一行时触发</td><td>当前行的数据,index</td></tr><tr><td>row-dblclick</td><td>双击某一行时触发</td><td>当前行的数据,index</td></tr><tr><td>expand</td><td>展开或收起某一行时触</td><td>row：当前行的数据,status：当前的状态</td></tr><tr><td>drag-drop</td><td>拖拽排序松开时触发</td><td>置换的两行数据索引和更新后的数据 newData, newIndex, oldIndex</td></tr></tbody></table><h2 id="table-slot" tabindex="-1">Table slot <a class="header-anchor" href="#table-slot" aria-label="Permalink to &quot;Table slot&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>header</td><td>表头</td></tr><tr><td>footer</td><td>页脚</td></tr><tr><td>loading</td><td>警告提加载中示内容</td></tr></tbody></table><h2 id="table-methods" tabindex="-1">Table methods <a class="header-anchor" href="#table-methods" aria-label="Permalink to &quot;Table methods&quot;">​</a></h2><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>clickCurrentRow</td><td>选中某一项</td><td>index</td></tr><tr><td>clearCurrentRow</td><td>清除高亮项，仅在开启</td><td>无</td></tr><tr><td>handleResize</td><td>刷新表格的宽高</td><td>无</td></tr><tr><td>getSelection</td><td>获取已经选中的行</td><td>无</td></tr></tbody></table><h2 id="column" tabindex="-1">column <a class="header-anchor" href="#column" aria-label="Permalink to &quot;column&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>列类型</td><td>String</td><td>index、selection、expand、html String</td><td>-</td></tr><tr><td>title</td><td>列头显示文字</td><td>String</td><td>-</td><td>#</td></tr><tr><td>key</td><td>对应列内容的字段名</td><td>String</td><td>-</td><td>-</td></tr><tr><td>width</td><td>列宽</td><td>Number</td><td>-</td><td>-</td></tr><tr><td>minWidth</td><td>最小列宽</td><td>Number</td><td>-</td><td>-</td></tr><tr><td>maxWidth</td><td>最大列宽</td><td>Number</td><td>-</td><td>-</td></tr><tr><td>align</td><td>对齐方式</td><td>String</td><td>right,center</td><td>left</td></tr><tr><td>className</td><td>列的样式名称</td><td>String</td><td>-</td><td>-</td></tr><tr><td>fixed</td><td>列是否固定在左侧或者右侧</td><td>String</td><td>left,right</td><td>-</td></tr><tr><td>ellipsis</td><td>开启后，文本将不换行</td><td>Boolean</td><td>-</td><td>false</td></tr><tr><td>tooltip</td><td>开启后，文本将不换行,并用 Tooltip 组件显示完整内容</td><td>Boolean</td><td>-</td><td>false</td></tr><tr><td>render</td><td>自定义渲染列 ,第一个是 h，第二个为对象，包含 row、column 和 index</td><td>Function</td><td>-</td><td>-</td></tr><tr><td>indexMethod</td><td>type 为 index 时可用，自定义序号 ,参数 row 为当前行内容</td><td>Function</td><td>-</td><td>-</td></tr><tr><td>sortable</td><td>对应列是否可以排序</td><td>Boolean ,&#39;custom&#39;</td><td>-</td><td>false</td></tr><tr><td>sortMethod</td><td>自定义排序使用的方法,三个参数 a 、 b 和 type</td><td>Function</td><td>-</td><td>-</td></tr><tr><td>sortType</td><td>设置初始化排序。值为 asc 和 desc</td><td>String</td><td>-</td><td>-</td></tr></tbody></table></div></div></div><footer class="page-edit"><div class="last-updated"><span class="prefix">最后更新: </span><span class="time">2024-01-27 01:26:11</span></div></footer><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/introduction"><span>introduction</span><i class="bx bx-chevron-right"></i></a></span></p></div><!--[--><!--]--><div class="up"><i class="bx bx-chevron-up"></i></div><footer class="footer" data-v-36e8006f><div class="footer__uls" data-v-36e8006f><!--[--><ul data-v-36e8006f><li class="title" data-v-36e8006f>FEI-UI-DESIGN</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>介绍</a></li><li data-v-36e8006f><a target="_blank" href="/guide/installation" data-v-36e8006f>快速上手</a></li><li data-v-36e8006f><a target="_blank" href="/guide/jsx" data-v-36e8006f>指南</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>资源</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>文档</a></li><li data-v-36e8006f><a target="_blank" href="/components/button" data-v-36e8006f>组件</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>帮助</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues" data-v-36e8006f>Github Issues</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design/issues" data-v-36e8006f>Gitee Issues</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>社区</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/" data-v-36e8006f>Github</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design" data-v-36e8006f>Gitee</a></li><!--]--></ul><!--]--></div><div class="copy" data-v-36e8006f><span class="span-copy" data-v-36e8006f> Copyright © 2023 FEI-UI-DESIGN </span><span class="span-lusaxweb" data-v-36e8006f><span data-v-36e8006f> Created By </span><a target="_blank" href="http://lusaxweb.net" data-v-36e8006f>后来@</a></span></div></footer></main><aside class="sidebar" data-v-818e4420><svg class="effect1" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)"></path></svg><div class="content-sidebar"><!--[--><!--]--><ul class="sidebar-links"><!--[--><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>通用组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/icon" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-fire" style=""></i> 图标 <span>(Icon)</span></a></li><li class=""><a href="/fei-ui-design/components/button" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-Youtube" style=""></i> 按钮 <span>(Button)</span></a></li><li class=""><a href="/fei-ui-design/components/card" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-creditcard" style=""></i> 卡片 <span>(Card)</span></a></li><li class=""><a href="/fei-ui-design/components/collapse" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-interation" style=""></i> 折叠面板 <span>(Collapse)</span></a></li><li class=""><a href="/fei-ui-design/components/divider" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-line" style=""></i> 分割线 <span>(Divider)</span></a></li><li class=""><a href="/fei-ui-design/components/dropdown" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-caret-down" style=""></i> 下拉菜单 <span>(Dropdown)</span></a></li><li class=""><a href="/fei-ui-design/components/tag" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-tags" style=""></i> 标签 <span>(Tag)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>布局组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/layout" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-layout" style=""></i> 布局 <span>(Layout)</span></a></li><li class=""><a href="/fei-ui-design/components/grid" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-appstore" style=""></i> 栅格 <span>(Grid)</span></a></li><li class=""><a href="/fei-ui-design/components/space" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-swap" style=""></i> 间距 <span>(Space)</span></a></li><li class=""><a href="/fei-ui-design/components/split" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-block" style=""></i> 分割面板 <span>(Split)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>数据录入组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/input" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-edit-square" style=""></i> 输入框 <span>(Input)</span></a></li><li class=""><a href="/fei-ui-design/components/input-number" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-shake" style=""></i> 数字输入 <span>(InputNumber)</span></a></li><li class=""><a href="/fei-ui-design/components/radio" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-plus-circle" style=""></i> 单选框 <span>(Radio)</span></a></li><li class=""><a href="/fei-ui-design/components/checkbox" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-check-square" style=""></i> 多选框 <span>(Checkbox)</span></a></li><li class=""><a href="/fei-ui-design/components/switch" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-build" style=""></i> 开关 <span>(Switch)</span></a></li><li class=""><a href="/fei-ui-design/components/select" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-unorderedlist" style=""></i> 选择器 <span>(Select)</span></a></li><li class=""><a href="/fei-ui-design/components/cascader" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-pic-left" style=""></i> 级联选择 <span>(Cascader)</span></a></li><li class=""><a href="/fei-ui-design/components/date-picker" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-calendar" style=""></i> 日期选择器 <span>(DatePicker)</span></a></li><li class=""><a href="/fei-ui-design/components/time-picker" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-time-circle" style=""></i> 时间选择器 <span>(TimePicker)</span></a></li><li class=""><a href="/fei-ui-design/components/color-picker" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-bg-colors" style=""></i> 颜色选择器 <span>(ColorPicker)</span></a></li><li class=""><a href="/fei-ui-design/components/rate" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-star" style=""></i> 评分 <span>(Rate)</span></a></li><li class=""><a href="/fei-ui-design/components/slider" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-minus" style=""></i> 滑块 <span>(Slider)</span></a></li><li class=""><a href="/fei-ui-design/components/upload" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-cloud-upload" style=""></i> 上传 <span>(Upload)</span></a></li><li class=""><a href="/fei-ui-design/components/form" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-reconciliation" style=""></i> 表单 <span>(Form)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>数据展示组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/tree" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-branches" style=""></i> 树结构 <span>(Tree)</span></a></li><li class="active"><a href="/fei-ui-design/components/table" title class="sidebar-link active"><i class="fei-icon f-iconfont f-icon-table" style=""></i> 表格 <span>(Table)</span></a></li><li class=""><a href="/fei-ui-design/components/page" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-read" style=""></i> 分页 <span>(Page)</span></a></li><li class=""><a href="/fei-ui-design/components/desc" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-unorderedlist" style=""></i> 描述 <span>(Desc)</span></a></li><li class=""><a href="/fei-ui-design/components/timeline" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-arrowdown" style=""></i> 时间线 <span>(Timeline)</span></a></li><li class=""><a href="/fei-ui-design/components/calendar" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-calendar-fill" style=""></i> 日历 <span>(Calendar)</span></a></li><li class=""><a href="/fei-ui-design/components/carousel" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-appstore-fill" style=""></i> 轮播 <span>(Carousel)</span></a></li><li class=""><a href="/fei-ui-design/components/count-to" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-orderedlist" style=""></i> 数字动画 <span>(CountTo)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>导航组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/affix" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-pushpin" style=""></i> 图钉 <span>(Affix)</span></a></li><li class=""><a href="/fei-ui-design/components/anchor" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-attachment" style=""></i> 锚点 <span>(Anchor)</span></a></li><li class=""><a href="/fei-ui-design/components/back-top" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-up" style=""></i> 返回顶部 <span>(BackTop)</span></a></li><li class=""><a href="/fei-ui-design/components/breadcrumb" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-right" style=""></i> 面包屑 <span>(Breadcrumb)</span></a></li><li class=""><a href="/fei-ui-design/components/loading-bar" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-minus" style=""></i> 加载条 <span>(Loading Bar)</span></a></li><li class=""><a href="/fei-ui-design/components/menu" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-menu" style=""></i> 菜单 <span>(Menu)</span></a></li><li class=""><a href="/fei-ui-design/components/tabs" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-project" style=""></i> 标签页 <span>(Tabs)</span></a></li><li class=""><a href="/fei-ui-design/components/steps" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-arrowright" style=""></i> 步骤 <span>(Steps)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>反馈组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/alert" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-error-fill" style=""></i> 警告信息 <span>(Alert)</span></a></li><li class=""><a href="/fei-ui-design/components/badge" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-border" style=""></i> 标记 <span>(Badge)</span></a></li><li class=""><a href="/fei-ui-design/components/modal" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-idcard" style=""></i> 模态框 <span>(Modal)</span></a></li><li class=""><a href="/fei-ui-design/components/message" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-message" style=""></i> 消息提示 <span>(Message)</span></a></li><li class=""><a href="/fei-ui-design/components/message-box" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-mail" style=""></i> 弹框提示 <span>(MessageBox)</span></a></li><li class=""><a href="/fei-ui-design/components/notice" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-notification" style=""></i> 通知 <span>(Notice)</span></a></li><li class=""><a href="/fei-ui-design/components/tooltip" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-info-circle" style=""></i> 弹出提示 <span>(Tooltip)</span></a></li><li class=""><a href="/fei-ui-design/components/popover" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-question-circle" style=""></i> 弹出信息 <span>(Popover)</span></a></li><li class=""><a href="/fei-ui-design/components/drawer" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-build" style=""></i> 抽屉 <span>(Drawer)</span></a></li><li class=""><a href="/fei-ui-design/components/skeleton" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-sever-fill" style=""></i> 骨架屏 <span>(Skeleton)</span></a></li><li class=""><a href="/fei-ui-design/components/loading" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-loading" style=""></i> 加载 <span>(Loading)</span></a></li><li class=""><a href="/fei-ui-design/components/progress" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-hourglass" style=""></i> 进度条 <span>(Progress)</span></a></li><li class=""><a href="/fei-ui-design/components/circle" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-redo" style=""></i> 进度环 <span>(Circle)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>内置组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/empty" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-border" style=""></i> 空状态 <span>(Empty)</span></a></li><li class=""><a href="/fei-ui-design/components/scrollbar" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-container" style=""></i> 滚动组件 <span>(Scrollbar)</span></a></li><li class=""><a href="/fei-ui-design/components/popper" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-pic-center" style=""></i> 弹层 <span>(Popper)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>配置组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/components/config-provider" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-setting" style=""></i> 全局配置 <span>(ConfigProvider)</span></a></li><!--]--></ul></section></li><!--]--></ul><!--[--><!--]--></div></aside><!----></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_breadcrumb.md\":\"Bg1uZ2l2\",\"components_card.md\":\"5vBOail9\",\"components_back-top.md\":\"NOXjEB41\",\"components_desc.md\":\"NNy8sdZB\",\"components_affix.md\":\"q2WWgWAm\",\"components_alert.md\":\"EzvdKauv\",\"components_empty.md\":\"Iqk9Sbur\",\"components_notice.md\":\"_NAs6-A7\",\"components_calendar.md\":\"JigwWurO\",\"components_message-box.md\":\"fCCAsymk\",\"components_rate.md\":\"9KkdoNnr\",\"components_loading-bar.md\":\"tkY5C0GZ\",\"components_divider.md\":\"IS1ZOnvq\",\"components_collapse.md\":\"0u5rpv51\",\"components_layout.md\":\"ODBV3zhY\",\"components_drawer.md\":\"CrRyiXyC\",\"components_anchor.md\":\"s14wXJS8\",\"components_scrollbar.md\":\"6vQ32Hdn\",\"components_popover.md\":\"wYQmpkgs\",\"components_message.md\":\"NO65C7hX\",\"components_circle.md\":\"ryx4IdBG\",\"components_popper.md\":\"5Fyiy38Q\",\"components_badge.md\":\"oO7JxteH\",\"components_page.md\":\"kNgnJY-a\",\"components_count-to.md\":\"eHOBDHvp\",\"guide_custom-theme.md\":\"n1FWcWco\",\"guide_common-directive.md\":\"nT9B4UFj\",\"components_slider.md\":\"DI2RI7Rr\",\"components_progress.md\":\"eFjRj96_\",\"components_checkbox.md\":\"7F5dha0P\",\"guide_changelog.md\":\"0yWmpxcB\",\"guide_jsx.md\":\"8hwr5r-5\",\"components_split.md\":\"wUEP-Ht5\",\"components_icon.md\":\"dZIqeyJA\",\"guide_common-transition.md\":\"MscjPGVR\",\"guide_installation.md\":\"j6S0f9nJ\",\"components_switch.md\":\"vcak84L_\",\"components_config-provider.md\":\"nBaHjQiX\",\"components_carousel.md\":\"NtUqJ85A\",\"components_select.md\":\"0rxZmlt4\",\"index.md\":\"soxSuBHK\",\"guide_introduction.md\":\"2mVny5Oj\",\"components_upload.md\":\"U3QoNCTf\",\"guide_usage-sfc.md\":\"rW-UMWov\",\"components_dropdown.md\":\"51EVo7GJ\",\"components_button.md\":\"rxuz04JE\",\"components_modal.md\":\"4bWdPtB_\",\"components_skeleton.md\":\"v-GES9KU\",\"guide_color-design.md\":\"cVmivjOg\",\"guide_import-on-demand.md\":\"t0iAz-CI\",\"components_loading.md\":\"DGAeDdDQ\",\"components_input-number.md\":\"2tw-2fEx\",\"components_timeline.md\":\"Py8dhkSr\",\"components_space.md\":\"qly7dGS4\",\"components_steps.md\":\"Nje8YnTW\",\"components_time-picker.md\":\"zWM_dqXm\",\"components_radio.md\":\"Nt3d-szh\",\"components_grid.md\":\"h2dg77Kz\",\"components_color-picker.md\":\"vP55BNVo\",\"components_tooltip.md\":\"y5xaDDhE\",\"components_menu.md\":\"7c_ihj_r\",\"components_tag.md\":\"U2sf24zV\",\"components_input.md\":\"dJc4_w-S\",\"components_tabs.md\":\"aWS6wiSt\",\"components_date-picker.md\":\"9ogHh5Jw\",\"guide_common-css.md\":\"uhWWbi3e\",\"components_cascader.md\":\"Qiv-ax3R\",\"components_form.md\":\"oq_ykolk\",\"guide_common-api.md\":\"ctudm0v6\",\"components_tree.md\":\"LtXYhey_\",\"components_table.md\":\"ZqShECt8\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"FEI-UI-DESIGN\",\"description\":\"A VitePress site\",\"base\":\"/fei-ui-design/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/gumingWu/vitepress-fun\"}],\"repo\":\"ymf-930/fei-ui-design\",\"docsDir\":\"/docs\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"text\":\"组件\",\"link\":\"/fei-ui-design/components/button\"}],\"locales\":{\"/\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/fei-ui-design/\"},{\"text\":\"Document\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"Getting Started\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"Components\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/\":[{\"title\":\"介绍\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"快速上手\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"指南\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"通用组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"布局组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"数据录入组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"数据展示组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"导航组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"反馈组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"内置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"配置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}},\"/es/\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/fei-ui-design/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"快速开始\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"组件\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"组件\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/es/\":[{\"title\":\"Introduce\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"Get Started\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"Guide\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"Common Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"Layout Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"Data entry component\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"Data display Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"Navigation Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"Feedback Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"Built-in Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"Configure Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/es/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}}},\"lastUpdated\":true,\"lastUpdatedText\":\"最后更新\",\"linkPrevVersion\":\"https://lusaxweb.github.io/vuesax/\",\"searchPlaceholder\":\"Search\"},\"locales\":{\"/\":{\"lang\":\"zh-CN\",\"text\":\"中文\"},\"/es/\":{\"lang\":\"en-US\",\"text\":\"English\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>